Thank you for starting this Sanjiv. I was able to reproduce the bug you are reporting.

I tried using the filterOptions prop which lets you filter the list of options, then I added a statement to log the filtered list of options if input === "aleph". As you can see, the correct options are logged to the browser console, but the UI is still showing old options:

In addition to using the filterOptions prop instead of filtering on the options prop directly, I've also tried:

1. Setting the key prop in the returned element in renderOption (as recommended here),
2. Passing inputValue={input} to make it re-render every keystroke,
3. Upgrading MUI to the latest v5 release (v5.18.0).

None of these fixed the bug. Over my entire history of working on JAI, I've cumulatively spent at least 15 hours trying to get Autocomplete components working. The conclusion I've arrived at is that the MUI Autocomplete component just doesn't work.

@srdas If you're up for it, I think the next best step is to re-implement the Autocomplete component. This will improve performance, fix the bug we're seeing, and solve this problem for good in Jupyter AI.

The MUI <Menu /> component can be attached under a <TextField />. Each model ID should be rendered as a <MenuItem /> child element and set the input value when it is clicked. The list of <MenuItem /> elements should also update to only show values that contain the current input as a substring, bolding the matched substring.

Docs: https://mui.com/material-ui/react-menu/#positioned-menu

@srdas If you're up for it, I think the next best step is to re-implement the Autocomplete component. This will improve performance, fix the bug we're seeing, and solve this problem for good in Jupyter AI.

The MUI <Menu /> component can be attached under a <TextField />. Each model ID should be rendered as a <MenuItem /> child element and set the input value when it is clicked. The list of <MenuItem /> elements should also update to only show values that contain the current input as a substring, bolding the matched substring.

Docs: https://mui.com/material-ui/react-menu/#positioned-menu

Sure, I'll work on this.

@dlqqq Thanks for the ideas above, based on which I have updated this PR. Given that there are thousands of models available on LiteLLM, I changed the Chat model ID field to take in a search string and show the number of matches, you can then click to see all the matches, with the search string in bold font. Then choose the required model ID or filter the list further as needed.

If the search string fails to find a match then the Chat model ID field displays "No matches". See the demo here:

@srdas This is a clever way of reducing the performance impact incurred filtering & sorting a list of up to 1000 entries. However, requiring a user to click to show suggestions is less intuitive than showing suggestions automatically. Users will expect search bars to show suggestions automatically like Google/Bing. When building interfaces, it is generally good to "minimize surprise" and align our UIs with what an average user would expect.

I recommend building an automatic suggestion UI first and optimizing for performance later.